<template>
  <div class="loading" v-if="loading">
    <a-spin tip="药方加载中..."/>
  </div>
  <div id="medicine">
    <div class="medicineList">
      <a-card :style="{ width: '360px', marginTop: '16px' }" hoverable
              v-for="item in medicineData" :key="item.id">
        <template #actions>
          <a-link :href="'medicine/' + item.id">详细信息</a-link>
        </template>
        <template #cover>
          <div
              :style="{
          height: '204px',
          overflow: 'hidden',
        }"
          >
            <a-image
                width="100%"
                alt="dessert"
                :src="item.imageAddress"
            />
          </div>
        </template>
        <a-card-meta :description="item.medicineUsage">
          <template #title>
            <a-tooltip position="tl" background-color="#3491FA" :content="item.spell">
              <span>
                {{ item.name }}
              </span>
            </a-tooltip>
          </template>
          <template #avatar>
            <div
                :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
            >
              <div class="tags">
                <a-tooltip position="tl" background-color="#3491FA" content="分类">
                  <a-tag>{{ item.classify }}</a-tag>
                </a-tooltip>
                <a-tooltip position="tl" background-color="#3491FA" content="效用">
                  <a-tag>{{ item.effect.split("。")[0] }}</a-tag>
                </a-tooltip>
              </div>
            </div>
          </template>
        </a-card-meta>
      </a-card>

      <div class="pagination">
        <a-pagination v-model="currentPage" :total="total" @change="changePage" simple/>
      </div>
      <div class="search">
        <a-input-search v-model="searchValue" :style="{width:'320px'}" placeholder="搜索药方" search-button
                        @keydown.enter="searchTCM(searchValue)" @search="searchTCM">
          <template #button-icon>
            <icon-search/>
          </template>
          <template #button-default>
            搜索一下
          </template>
        </a-input-search>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import myAxios from "../../plugins/myAxios.ts";
import {useRoute} from "vue-router";

const route = useRoute()
const medicineData = ref([])
const total = ref(10)
const currentPage = ref()
const searchValue = ref('')
const loading = ref(true)
const getMedicineData = async (current: number, pageSize: number) => {
  const res = await myAxios.post('/medicine/list/page', {
    current: current,
    pageSize: pageSize
  })
  if (res.code === 0) {
    medicineData.value = res.data.records
    medicineData.value.forEach(item => {
      item.imageAddress = "src/assets/images/images/" + item.imageAddress.split("\\")[1]
    })
    currentPage.value = res.data.current
    total.value = parseInt(res.data.total)
    if (medicineData.value.length > 0) {
      loading.value = false
    }
  }
}
const changePage = (current) => {
  currentPage.value = current
  loading.value = true;
  getMedicineData(current, 8)
}

const searchTCM = async (value) => {
  loading.value = true;
  const res = await myAxios.post('/medicine/search', {
    keyword: value
  })
  if (res.code === 0) {
    medicineData.value = res.data.records
    medicineData.value.forEach(item => {
      item.imageAddress = "src/assets/images/images/" + item.imageAddress.split("\\")[1]
    })
    currentPage.value = res.data.current
    total.value = parseInt(res.data.total)
    loading.value = false
  }
}
onMounted(() => {
  getMedicineData(1, 8)
})
</script>

<style scoped>
#medicine {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  background-color: #F7F8FA;
  min-width: 530px;
}

.medicineList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4.5rem;
  justify-content: space-evenly;
}

.pagination {
  position: absolute;
  top: 6rem;
  left: 2vw;
}

.search {
  position: absolute;
  top: 6rem;
  right: 2vw;
}

.tags span {
  margin-left: 10px;
}

:deep(.arco-card-meta-description) {
  text-indent: 2em;
  line-height: 24px;
}

.loading {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding-top: 45vh;
  width: 100vw;
  height: 100vh;
  z-index: 999;
}
</style>
